<template>
  <div style="border: 1px solid #ccc; margin-top: 10px">
    <!-- 工具栏 -->
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" />
    <!-- 编辑器 -->
    <Editor
      v-model="editorContent"
      style="height: 400px; overflow-y: hidden"
      :defaultConfig="editorConfig"
      @onCreated="onCreated"
    />
  </div>
</template>

<script>
import { readToken } from '@/utils/auth'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  name: 'MyEditor',
  components: { Editor, Toolbar },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 双向绑定 content
    editorContent: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  data() {
    return {
      editor: null,
      toolbarConfig: {
        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
        excludeKeys: ['group-video']
      },
      editorConfig: {
        placeholder: '请输入内容...',
        md: {
          enable: true
        },
        MENU_CONF: {
          uploadImage: {
            // 后端上传地址，必填
            server: `${process.env.VUE_APP_BASE_API}/api/upload/article`,
            customInsert(res, insertFn) {
              const url = res.data.imgUrl
              insertFn(url)
            },
            fieldName: 'files',
            // 1M，单个文件的最大体积限制，默认为 2M
            maxFileSize: 1 * 1024 * 1024,
            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 1,
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['image/*'],
            // 15 秒，超时时间，默认为 10 秒
            timeout: 15 * 1000,
            headers: {
              Accept: 'text/x-json',
              Authorization: `Bearer ${readToken()}`
            }
          }
        }
      }
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor !== null) {
      editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
    }
  }
}
</script>

<style lang="scss" scoped></style>
